An image based Meter chart with background and needle images

This Meter uses CSS width/height units on the canvas tag to scale the whole Meter down (the image is 640x640 but the canvas is sized by CSS to 400x400).

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.meter.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="640" height="640" style="width: 400px; height: 400px">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var meter = new RGraph.Meter({
            id: 'cvs',
            min: 0,
            max: 9,
            value: 8.5,
            options: {
                centerx: 321,
                centery: 298,
                backgroundColor: 'rgba(0,0,0,0)',
                backgroundImageUrl: '/images/meter-image-sd.png',
                backgroundImageStretch: true,
                backgroundImageOffsetx: 0,
                backgroundImageOffsety: 0,
                scaleDecimals: 1,
                needleColor: 'rgba(0,0,0,0)',
                needleImageUrl: '/images/meter-image-sd-needle.png',
                needleImageOffsetx: -94,
                needleImageOffsety: -40,
                colorsRanges: [],
                tickmarksBigNum: 0,
                tickmarksSmallNum: 0,
                border: false,
                labels: false,
                textSize: 36,
                centerpinStroke: 'rgba(0,0,0,0)',
                centerpinFill: 'rgba(0,0,0,0)',
                anglesStart: 2.69,
                anglesEnd: 7.38
            }
        }).draw()
        
        //meter.canvas.onclick = function (e)
        //{
        //    var value = meter.getValue(e);
        //
        //    if (typeof value === 'number') {
        //        meter.value = value;
        //        meter.grow();
        //    }
        //}
    };
</script>